<template>
  <div class="systemButton">
    <CommonBtn labelName="导航菜单信息  <span style='color:red'> 注：该功能谨慎使用！</span>" :buttons="buttons" @onButtonClick="onButtonClick"></CommonBtn>
    <CommonList  ref="list" :columns="columns" :list-url="listUrl"  @tableSelect="tableSelect" row-key="menuId" ></CommonList>
    <edit-pop-up  v-if="add" :out-btn="button" :props="add" @closeDialog="button=null" :submit-url="$api.API_RMBASE_SYSTEM_ADD" :edit-url="$api.API_RMBASE_SYSTEM_UPDATE" @refresh="refresh" :original-data="row"></edit-pop-up>
    <EnsurePopUp :out-btn="button" @close="button = null" @refresh="refresh" :original-data="row"
                 :delete-url="$api.API_RMBASE_SYSTEM_DELETE"></EnsurePopUp>
    <IconSelector :show="show" @close="show =false" @select="handleSelect"></IconSelector>
  </div>
</template>

<script>
    import CommonList from "../../common/CommonList"
    import CommonBtn from "../../common/CommonBtn";
    import EditPopUp from "../../common/EditPopUp";
    import EnsurePopUp from "../../common/EnsurePopUp";
    import IconSelector from "../../common/IconSelector";
    export default {
        name:'todoList',
        data(){
            return{
                buttons:[
                    this.$config.BTNS.ADD,
                    this.$config.BTNS.EDIT,
                    this.$config.BTNS.DELETE,
                    this.$config.BTNS.HELP
                ],
                button:{},
                columns:[
                    {
                        prop:'menuName',
                        label:'菜单名称',
                        minWidth:'40'
                    },
                    {
                        prop:'menuImg',
                        label:'图标',
                        minWidth: '20',
                        customSet(value) {
                            if (value) {
                                let src = "/static/img/32/"+value
                                return '<img src="'+src+'"/>'
                            }
                            return ""
                        },
                    },
                    {
                        prop:'parentId',
                        label:'类型',
                        minWidth: '20',
                        customSet:function (value) {
                            if (value==0) {
                                return '父节'
                            } else {
                                return '子节'
                            }
                        }
                    },
                    {
                        prop:'target',
                        label:'连接目标',
                        minWidth: '40'
                    },
                    {
                        prop:'sort',
                        label:'显示顺序',
                        minWidth: '30'
                    },
                    {
                        prop:'navigateUrl',
                        label:'连接地址'
                    }
                ],
                nodeList:[{label:'模块菜单-父节',value:'0'}],
                add:{
                    title:'菜单信息按钮',
                    addItems:[
                        //{name:'菜单标记',prop:'menuTitle',type:'text',required:true},
                        {name:'菜单名称',prop:'menuName',type:'text',required:true},
                        {name:'节点位置',prop:'parentId',type:'select',options:[],required:true},
                        {name:'菜单图标',prop:'menuImg',type:'imgSelect',folder:'32',click:()=>{this.show=true}},
                        {name:'连接目标',prop:'target',type:'select',required:true,options:[{label:'Iframe',value:'Iframe'},{label:'Open',value:'open'},{label:'href',value:'href'}]},
                        {name:'显示顺序',prop:'sortCode',type:'text',required:true},
                        {name:'连接地址',prop:'navigateUrl',type:'textarea'},
                    ],
                    type:'dialog'
                },
                row:{},
                listUrl:this.$api.API_RMBASE_SYSTEM_LIST,
                show:false,
                submit:{}
            }
        },
        methods:{
            onButtonClick(item) {
                if (item.event == 'edit()' || item.event == 'detail()' || item.event == 'Delete()') {
                    if (!this.row || JSON.stringify(this.row) == '{}') {
                        this.$message.error("请选择一行数据")
                        return
                    }
                    this.submit = Object.assign({},this.row)
                }
                if (item.event == 'add()') {
                    this.submit = {}
                }
                this.button = item
            },
            tableSelect(row) {
                this.row = row
            },
            initData() {
              this.$http.post(this.$api.API_RMBASE_SYSTEM_INIT).then(resp=>{
                  for (let i=0;i<resp.length;i++) {
                      let node = {value:resp[i].menuId,label:resp[i].menuName}
                      this.nodeList.push(node)
                      this.add.addItems[1].options = this.nodeList
                  }
              },msg=>{})
            },
            refresh() {
                this.$refs.list.search()
            },
            handleSelect(img) {
                this.$set(this.row,'menuImg',img)
            }
        },
        created(){
            this.initData()
        },
        components:{CommonList,CommonBtn,EditPopUp,EnsurePopUp,IconSelector}
    }
</script>
